<template>
  <div class="item-query">
    <!-- 选择时 -->
    <div
      v-if="!check"
      :class="`item ${targetIndex.indexOf(index) != -1 ? 'f1' : ''}`"
      v-for="(item, index) in list"
      :key="item"
      @click="handClickItem(item, index)"
    >
      {{ index }}. {{ item }}
    </div>
    <!-- 确认时 -->
    <div
      v-if="check"
      :class="`item ${
        check === 1
          ? answer === index
            ? 'true'
            : ''
          : targetIndex.indexOf(index) != -1
          ? 'red'
          : answer === index
          ? ''
          : ''
      }`"
      v-for="(item, index) in list"
      :key="item"
    >
      {{ index }}. {{ item }}
    </div>
    <!-- <div class="answer" v-if="check">答案: {{ answer }}</div> -->
    <div class="button">
      <!-- <div class="pre" @click="pre">上一题</div> -->
      <div class="next" @click="next" v-if="!finallyOr()">下一题</div>
      <div class="next" @click="submit" v-if="finallyOr()">提交答题</div>
    </div>
  </div>
</template>

<script>
import { ref, toRefs, computed, watch } from "vue";
import { Notify, Toast } from "vant";
import { useStore } from "vuex";
import { userSave } from "../../network/axios";
import { useRouter } from "vue-router";
export default {
  name: "Item",
  props: ["choess", "answer", "level", "score", "testType", "pageNum", "listArr"],
  setup(props, context) {
    const store = useStore();
    const router = useRouter();
    let times = computed(() => {
      return store.state.times;
    });
    watch(
      () => times.value,
      (val) => {
        if (val === 0) {
          if (finallyOr()) {
            // 提交
            submit();
          } else {
            // 下一题
            if (next() === false) {
              context.emit("next");
            }
            store.commit("INIT_TIMES");
          }
        }
      }
    );
    const infoFalse = computed(() => store.state.infoFalse);
    // level:1 是单选， 2是多选
    const { choess: list, answer, level, score, testType, pageNum, listArr } = toRefs(
      props
    );
    const targetIndex = ref("");
    const check = ref(0);
    const next = () => {
      if (!targetIndex.value) {
        Toast("请选择一个选项");
        return false;
      }
      store.commit("INIT_TIMES");
      check.value = targetIndex.value == answer.value ? 1 : 2;
      if (check.value == 1) {
        Toast.loading({
          message: "恭喜回答正确",
          forbidClick: true,
        });
      } else {
        Toast.loading({
          message: "回答错误自动跳往下一题",
          forbidClick: true,
        });
      }
      setTimeout(() => {
        if (answer.value == targetIndex.value) {
          store.commit("trues", {
            score: score.value,
          });
        } else {
          store.commit("falses", {
            pageNum: pageNum.value,
            targetIndex: targetIndex.value,
            answer: answer.value,
          });
        }
        targetIndex.value = "";
        check.value = "";
        store.commit("INIT_TIMES");
        context.emit("next");
      }, 2000);
      return true;
    };

    const finallyOr = () => {
      return pageNum.value + 1 >= listArr.value.length;
    };
    const submit = async () => {
      if (answer.value == targetIndex.value) {
        store.commit("trues", {
          score: score.value,
        });
      } else {
        store.commit("falses", {
          pageNum: pageNum.value,
          targetIndex: targetIndex.value,
          answer: answer.value,
        });
      }
      const scoresList = JSON.parse(localStorage.getItem("user-true"));
      let scores = 0;

      if (scoresList) {
        scoresList.forEach((item) => {
          scores += Number(item["score"]);
        });
      }

      Toast.loading({
        message: "正在提交分数",
        forbidClick: true,
      });
      setTimeout(async () => {
        const {
          data: { code },
        } = await userSave({ score: scores });
        // console.log(info, "info");
        if (code == 200) {
          Notify({
            type: "success",
            message: "提交分数成功",
          });
          router.push({
            name: "Finally",
          });
        } else {
          Notify({
            type: "danger",
            message: "提交分数失败,请联系管理员",
          });
        }
      }, 2000);
      // userSave({
      //   score: scores,
      // }).then((res) => {
      //   console.log(res, "res");
      // });
    };
    const pre = () => {
      context.emit("pre");
    };

    const handClickItem = (item, index) => {
      switch (level.value) {
        case 1:
          targetIndex.value = index;
          break;
        case 2:
          targetIndex.value =
            targetIndex.value.indexOf(index) !== -1
              ? targetIndex.value.replace(index, "")
              : targetIndex.value + index;
          targetIndex.value.split("").sort().join("");
          break;
        default:
          break;
      }
    };
    return {
      next,
      list,
      handClickItem,
      targetIndex,
      check,
      pre,
      submit,
      answer,
      finallyOr,
      infoFalse,
    };
  },
};
</script>

<style lang="scss" scoped>
.item-query {
  font-size: 0.32rem;
  margin-top: 0.35rem;
  .item {
    // height: 1rem;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 20px;
    margin: 0.5rem 0;
    padding: 0.25rem;
  }
  .f1 {
    background: #ccc;
  }
  .red {
    background: #f04f53;
    color: #000;
  }
  .true {
    background: #5cbd78;
  }
  .answer {
    margin: 0.5rem 0;
  }
  .button {
    display: flex;
    .pre {
      background: #5cbd78 !important;
    }
    .next,
    .pre {
      flex: 1;
      background: #f2bc47;
      height: 0.8rem;
      border-radius: 20px;
      text-align: center;
      line-height: 0.8rem;
      color: #fff;
    }
  }
}
</style>
